<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
</head>
<body>

<!--
      v-for  实现数据的遍历   该指令需要写在需要循环生成的标签上

     1. 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key
     2. 建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升

-->

<div id="app">
    <h2>{{info}}</h2>
    <p>------------遍历字符串数组----------------</p>
      <ul>
          <li v-for="name in names">{{name}}</li>
      </ul>

    <ul>
        <li v-for="(name,index) in names" :key="index">{{name}}--{{index}}</li>
    </ul>

    <hr>
    <p>------------遍历对象----------------</p>
    <ul>
        <li v-for="val in usr">{{val}}</li>
    </ul>

    <ul>
        <li v-for="(val,attr) in usr">{{attr}}:{{val}}</li>
    </ul>

    <hr>
    <p>------------遍历对象数组----------------</p>
    <ul>
        <li v-for="u in users">
           <p v-for="val in u">{{val}}</p>
        </li>
    </ul>
    <p>------------遍历对象数组----------------</p>
    <table border="1px"  cellspacing="0" >
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr v-for="u in users">
            <td v-for="val in u" >{{val}}</td>
        </tr>
    </table>

</div>

<script>

    let vm = new Vue({
        el:'#app',
        data:{
            info:"用户信息展示",
            names:[
                "tom","jack"
            ],
            usr:{
                name:'tom1',
                age:20,
                sex:'男'
            },
            users:[
                {
                    name:'tom1',
                    age:20,
                    sex:'男',
                },
                {
                    name:'tom2',
                    age:20,
                    sex:'男'
                },
                {
                    name:'tom3',
                    age:20,
                    sex:'男'
                },
                {
                    name:'tom3',
                    age:20,
                    sex:'男'
                },
                {
                    name:'tom3',
                    age:20,
                    sex:'男'
                }
            ]
        },
        methods:{}
      })
</script>


</body>
</html>